﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script src="../../Scripts/jquery.bindTools.js" type="text/javascript"></script>

    <script src="../js/chili/jquery.chili-2.2.js" type="text/javascript"></script>

    <script src="../../Scripts/jquery.json.min.js" type="text/javascript"></script>

    <script src="../js/chili/recipes.js" type="text/javascript"></script>

    <link href="../sample.css" rel="stylesheet" type="text/css" />
    <link href="../960.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" language="javascript">


        $(document).ready(function() {
            var data = {
                name: "leo", //字符串
                heigh: 150, //number
                booldType: ["O", "A", "B", "AB", "O-", "B"], //数组
                birthday: new Date(1999, 1, 1), //日期型
                registDate: "\/Date(1240718400000)\/", //asp.net json 日期类型
                isVip: "1", //bool型 1字符表示波尔型，并不推荐使用这种方式表示。
                isLock: false //boo型 
            };
            $("#demo").bindTool().bindTool("bind", data);

            $("#getJsonObject").click(function() {
                var s = $("#demo").bindTool("collect");
                alert($.toJSON(s));
            });
        });        
    </script>

</head>
<body>
    <div style="clear: both">
        <h3>
            Demo:</h3>
    </div>
    <div id="demo" style="float: left; width: 220px">
        <p>
            <input type="button" id="getJsonObject" value="从下面的HTML获取Json对象" />
        </p>
        <p>
            <label for="name">
                姓名(字符串):</label>
            <input id="name" type="text" />
        </p>
        <p>
            <label>
                生日(new Date()):</label>
            <input id="birthday" type="text" />
        </p>
        <p>
            <label>
                注册日期（ASP.Net Json日期）</label>
            <input id="registDate" type="text" />
        </p>
        <p>
            <label>
                血型</label>
            <select id="booldType">
            </select>
        </p>
        <p>
            <label for="heigh">
                高度:</label>
            <input id="heigh" type="text" />CM
        </p>
        <p>
            <label>
                是否Vip</label>
            <input id="isVip" type="checkbox" />
        </p>
        <p>
            <label>
            是否锁定
            </label>
            <input id="isLock" type="checkbox" />
        </p>
    </div>
    <div class="source" style="float: left; width: 500px">
        bindTool基于约定，因此可以用最少配置就可以完成绑定和收集。如下：
        <pre class="ln-1 code"><code class="js">
var data = {
    name: "leo", //字符串
    heigh: 150, //number
    booldType: ["O", "A", "B", "AB", "O-", "B"],//数组
    birthday: new Date(1999, 1, 1), //日期型
    registDate: "\/Date(1240718400000)\/", //asp.net json 日期类型
    isVip: "1", //bool型 1字符表示波尔型，并不推荐使用这种方式表示。
    isLock: false //boo型 
};
$("#demo").bindTool().bindTool("bind", data);
        </code></pre>
    </div>
</body>
</html>
